<template>
    <el-row class="warp">
        <el-col class="publicNav" :span="3" style="height:100%;">
            <router-link to="/layout/system" >系统管理</router-link>
            <router-link to="/layout/systemversion" >网卡配置</router-link>
            <router-link class="newnava" to="/layout/systemdetails" >系统配置</router-link>
        </el-col>
        <el-col :span="21" style="height:100%;">
          <div class="main-contents-box">
            <div class="main-contents-main">
              <div class="systemversion" style="">
                <el-row>
                  <el-col :span="24" :xs="24">
                        <div class="details-box">
                          <div class="details-box-header">
                              系统信息设置
                          </div>
                            <ul>
                              <li>
                                  <div class="details-box-title">
                                      设备名称设置:
                                  </div>
                                  <div class="details-box-content">
                                    <el-input size="mini" v-model="devicename" ></el-input>
                                  </div>
                                  <div class="details-box-btn">
                                    <el-button type='primary' size="mini" @click="set_name">设置</el-button>
                                  </div>
                              </li>
                              <li>
                                  <div class="details-box-title">
                                      系统时间设置:
                                  </div>
                                  <div class="details-box-content system-time">
                                        <el-date-picker
                                          v-model="sys_time"
                                          type="datetime"
                                          size="mini"
                                          width="200"
                                          align="center"
                                          value-format="yyyy/MM/dd HH:mm:ss"
                                          placeholder="选择日期时间">
                                        </el-date-picker>
                                        <!-- <el-time-select
                                          v-model="value1"
                                          :picker-options="{
                                            start: '08:30',
                                            step: '00:15',
                                            end: '18:30'
                                          }"
                                          placeholder="选择时间">
                                        </el-time-select> -->
                                  </div>
                                  <div class="details-box-btn">
                                    <el-button  type='primary' size="mini" @click="set_time">设置</el-button>
                                  </div>
                              </li>
                              <li class="password-edit">
                                  <div class="details-box-title">
                                      用户密码修改:
                                  </div>
                                  <div class="details-box-content">
                                      <div class="password-box">
                                        <span>旧密码:</span>
                                        <el-input type="password" size="mini" placeholder="请输入旧密码" v-model="old_pwd"></el-input>
                                      </div>
                                      <div class="password-box">
                                        <span>新密码:</span>
                                        <el-input type="password" size="mini" placeholder="请输入新密码" v-model="new_pwd"></el-input>
                                      </div>
                                  </div>
                                  <div class="details-box-btn">
                                    <el-button type='primary' size="mini" @click="set_userinfo">修改</el-button>
                                  </div>
                              </li>
                              <li>
                                  <div class="details-box-title">
                                      系统版本号:
                                  </div>
                                  <div class="details-box-content">
                                    <el-input disabled size="mini" v-model="hardware_version"></el-input>
                                  </div>
                              </li>
                              <li>
                                  <div class="details-box-title">
                                      软件版本号:
                                  </div>
                                  <div class="details-box-content">
                                    <el-input disabled size="mini" v-model="software_version"></el-input>
                                  </div>
                              </li>
                              <li>
                                  <div class="details-box-title">
                                      插件版本号:
                                  </div>
                                  <div class="details-box-content">
                                    <el-input disabled size="mini" v-model="plugin_version"></el-input>
                                  </div>
                              </li>
                              <li>
                                  <div class="details-box-title">
                                      产品序列号:
                                  </div>
                                  <div class="details-box-content">
                                    <el-input disabled size="mini" v-model="sn"></el-input>
                                  </div>
                              </li>
                            </ul>
                        </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
  name: 'systemdetails',
  data () {
    return {
        sys_time:'',
        devicename:"123",
        old_pwd:"",
        new_pwd:"",
        software_version:"111111",
        hardware_version:"222222",
        plugin_version:"33333",
        sn:"12121212"
     }
  },
  methods:{
      get_pwd(){
          let  pwd; 
          $.ajax({
              url:'../cfg/password.json',
              type:'GET',
              cache:false,
              async: false,
              dataType:'text',
              success:function(result){
                  let data = eval("("+result+")");
                  pwd = data.password;
              },
              error:function(realdata){                           
              }
          })
          return pwd;
      },
      check_pwd(){
          let username = window.sessionStorage.getItem('username');
          let password = window.sessionStorage.getItem('password');
          let pwd = this.get_pwd();
          if(username == "admin"){
              if(password != pwd){
                  this.$message({
                      message: '密码做了更改,请重新登录!',
                      type: 'info',
                      center:true,
                      showClose: true
                  });
                  this.loginout();
              }
          } 
      },
      loginout(){
          window.sessionStorage.removeItem("username");
          window.sessionStorage.removeItem("password");
          this.set_log("用户退出");
          this.$router.push("/login");
      },
      set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      },
      save(){
          this.$confirm('此操作将修改系统配置, 是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
          }).catch(() => {
              
          });
      },
      set_name(){
        let that=this;
        let devicename = this.$data.devicename;
        if(devicename == ""){
            that.$message({
                message: '设备名称不能为空,请重新填写!',
                type: 'error',
                center:true,
                showClose: true
            });
            return false;
        }

        //设备名称的长度限制36个字符长度(12个中文字)
        if(this.get_length(devicename) > 36 ){
            this.$message({
                message: '设备名称过长,请重新输入!',
                type: 'error',
                center:true,
                showClose: true
            });
            return false;
        } 

        let msg = {"name":devicename};
        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("./static/request.json",msg).then(function(res){
                if(res.data.state == 1){
                    that.$message({
                      message: '设备名称设置成功!',
                      type: 'success',
                      center:true,
                      showClose: true
                    });
                }else{
                  that.$message({
                      message: '设备名称设置失败!',
                      type: 'error',
                      center:true,
                      showClose: true
                    });

                }   
            })
        }else{
            $.ajax({
                url:"cgi-bin/JHSetName.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                data:JSON.stringify(msg),
                success:function(msg){
                    let data =eval( "("+msg+")" );
                    if(data.state == 1){
                        that.$message({
                          message: '设备名称设置成功!',
                          type: 'success',
                          center:true,
                          showClose: true
                        });
                    }else{
                      that.$message({
                          message: '设备名称设置失败!',
                          type: 'error',
                          center:true,
                          showClose: true
                        });

                    } 
                }
            })
        }

      },
      set_time(){
        let that=this;
        let str = this.$data.sys_time.replace(/\//g, ".");
        let sys_time = str.replace(/ /,"-");    
        let msg = {"time":sys_time};
        $.ajax({
            url:"cgi-bin/JHSetTime.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){
                let data =eval( "("+msg+")" );
                //console.log(data);
                if(data.state == 1){
                    let storage = window.sessionStorage;
                    storage.setItem("time",that.$data.sys_time);
                    that.$message({
                      message: '系统时间设置成功!',
                      type: 'success',
                      center:true,
                      showClose: true
                    });
                }else{
                  that.$message({
                      message: '系统时间设置失败!',
                      type: 'error',
                      center:true,
                      showClose: true
                    });

                } 
            }
        })
      },
      set_userinfo(){
        let that=this;
        let pwd = this.get_pwd();
        let old_pwd = this.$data.old_pwd;
        let new_pwd = this.$data.new_pwd;

        if(new_pwd == ""){
          that.$message({
                message: '新密码不能为空,请重新填写!',
                type: 'error',
                center:true,
                showClose: true
            });
            return false;
        }

        if(pwd != old_pwd){
            that.$message({
                message: '原始密码错误,请重新填写!',
                type: 'error',
                center:true,
                showClose: true
            });
            return false;
        }

        //设备密码的长度限制个6~12位
        if(new_pwd < 6  || new_pwd>12 ){
            this.$message({
                message: '密码长度设置为6~12位,请重新输入!',
                type: 'error',
                center:true,
                showClose: true
            });
            return false;
        } 

        let msg = {"password":new_pwd};
        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("./static/request.json",msg).then(function(res){
                let data =eval( "("+res.data+")" );
                if(data.state == 1){
                    that.$confirm('密码设置成功, 即将退出到登录页面!', '提示', {
                        confirmButtonText: '确定',
                        //cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if(window.sessionStorage.getItem('username')=="admin"){
                            that.$router.push("/login");
                        } 
                    }).catch(() => {
                        that.$message({
                          type: 'info',
                          message: '取消操作',
                          position:'bottom-right'
                        });
                    }); 
                }else{
                  that.$message({
                      message: '密码设置设置失败!',
                      type: 'error',
                      center:true,
                      showClose: true
                    });

                }   
            })
        }else{
            $.ajax({
                url:"cgi-bin/JHSetPassword.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                data:JSON.stringify(msg),
                success:function(msg){
                    let data =eval( "("+msg+")" );
                    if(data.state == 1){
                         that.$confirm('密码设置成功,即将退出到登录页面!', '提示', {
                            confirmButtonText: '确定',
                            //cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if(window.sessionStorage.getItem('username')=="admin"){
                              that.set_log("更改用户密码");
                            that.$router.push("/login");
                        } 
                        }).catch(() => {
                            that.$message({
                              type: 'info',
                              message: '取消操作',
                              position:'bottom-right'
                            });
                        }); 
                    }else{
                      that.$message({
                          message: '系统时间设置失败!',
                          type: 'error',
                          center:true,
                          showClose: true
                        });
                    } 
                }
            })
        } 
      },
      get_sys_time(){//获取系统时间
        let that = this;
        $.ajax({
            url:"cgi-bin/JHGetTime.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(""),
            success:function(msg){
                //console.log(eval( "("+msg+")" ));
                let data =eval( "("+msg+")" );
                let str = data.time.replace(/-/g, " ");
                let sys_time = str.replace(/\./g,"/");
                let storage = window.sessionStorage;
                storage.setItem('time',sys_time);
                that.$data.sys_time = sys_time;
            }
        })
      },
      get_device_name(){//获取设备名称
          let that  = this;
          $.ajax({
            url:"./cfg/name.json",
            type:'GET',
            async:false,
            cache:false,
            success:function(res){
                //console.log(eval( "("+res+")" ));
                let data = eval( "("+res+")" );
                that.devicename = data.name;
            },
            error:function(xml){
              
            }
          })
      },
      get_sys_version(){//获取软硬版本号
          let that  = this;
          $.ajax({
            url:"./cfg/version.json",
            type:'GET',
            async:false,
            cache:false,
            success:function(res){
                //console.log(eval( "("+res+")" ));
                let data = eval( "("+res+")" );
                that.software_version = data.software;
                that.hardware_version = data.hardware;
                that.plugin_version = data.plugin;
            },
            error:function(xml){
              
            }
          })
      },
      get_sn(){//获取序列号
          let that  = this;
          $.ajax({
            url:"./cfg/sn.json",
            type:'GET',
            async:false,
            cache:false,
            success:function(res){
                let data = eval( "("+res+")" );
                that.sn = data.sn;
            },
            error:function(xml){
              
            }
          })
      },
      set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_APPEND_USER","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
      update_time(){

        var storage = window.sessionStorage;
        var time = storage.getItem("time");
        var timestamp2 = Date.parse(new Date(time));
        timestamp2 += 1000;
        
        var currenttime = new Date(timestamp2);
        var nowtime = this.getdate(currenttime);   
        storage.setItem('time',nowtime);

        this.$data.sys_time = nowtime;          
      },
      getdate(now){
        var y = now.getFullYear();
        var m = now.getMonth() + 1;
        var d = now.getDate();
        
        var current = y + "/" + (m<10 ? "0" + m:m) + "/" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0,8);
        return current;
      },
      get_length(val){//获取含中英文的字符长度
        var len = 0;  
        var v = $.trim(val);  
        for(let i=0;i<v.length;i++)  {  
            if(v.charCodeAt(i)>256)  {  
                len += 3;  
            } else {  
                len++;  
            }  
        }
        return len;
    }
  },
  mounted(){
      this.check_pwd(); 
      this.get_sys_time();
      this.get_device_name();
      this.get_sys_version();
      this.get_sn();
      //setInterval(this.update_time,1000);
  }
}
</script>

<style scope>
.systemversion{
  width: 90%;
  height: 100%;
  margin: auto;
}
.details-box{
  width: 400px;
  margin: auto;
  padding: 10px;
  height: 426px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8%;
  box-shadow: 1px 1px 15px #e6e6e6;
}
.details-box-header{
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  letter-spacing: 2px;
  background: #f5f7fa;
}
.details-box ul{
  width: 100%;
  height: 100%;
}
.details-box ul li{
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebeef5;
}
.details-box ul .password-edit{
  height: 80px;
}
.password-edit .details-box-title{
  height: 80px;
  line-height: 80px;
}
.password-edit .details-box-btn{
  line-height: 80px;
}
.details-box-content .password-box{
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.password-box span{
  display: block;
  float: left;
  width: 80px;
  text-align: center;
  color:#606266;
}
.password-box .el-input{
  width: 120px;
  float: left;
  text-align: center;
}
.details-box-title{
  float: left;
  width: 130px;
  text-align: center;
  font-style: 14px;
  letter-spacing: 1px;
  color:#606266;
}
.details-box-content{
  float: left;
  width: 200px;
  height: 100%;
  overflow:hidden;
}
.details-box-btn{
  float: left;
  text-align: center;
  width: 70px;
}
.system-time .el-input--mini .el-input__inner{
  width: 200px;
}
.system-time .el-input--mini .el-input__suffix{
  right: 20px;
}
</style>
